<template>
    <div>
        <Breadcrumb name1="商品管理" name2="商品分类"></Breadcrumb>
        <el-card>
            <el-button type="primary" @click="addCateDialogbtn" class="addbtn">添加分类</el-button>
            <tree-table :data="cateList" 
            :columns="columns" border
            :selection-type="false"
            :expand-type="false"
            show-index
            index-text="#">
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i :class="scope.row.cat_deleted==false ? 'el-icon-circle-check' : 'el-icon-circle-close'"
                        :style="scope.row.cat_deleted==false ? 'color:lightgreen':'color:red'"></i>
                </template>
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <el-tag :type="scope.row.cat_level==0 ? '': scope.row.cat_level==1 ? 'success':'warning'">
                        {{scope.row.cat_level==0 ? "一级" : scope.row.cat_level==1 ? "二级":"三级"}}
                    </el-tag>
                </template>
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateCateDialogbtn(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteCate(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>

            <!-- 分页 -->
            <pagination 
                @handleSizeChange="handleSizeChange" 
                @handleCurrentChange="handleCurrentChange"
                :totalRecords="total">
            </pagination>
        </el-card>

        <!-- 添加分类的对话框   -->
        <el-dialog title="添加分类" width="50%" 
        :visible.sync="addCateDialog" 
        @close="addCateDialogClosed">
            <el-form :model="addCateForm" :rules="addCateFormRules" 
            ref="addCateFormRef" label-width="100px">
                <el-form-item label="分类名称:" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类:" prop="cat_pid">
                    <el-cascader
                        v-model="selectd_pid"
                        :options="parentCateList"
                        :props="props"
                        @change="parentCateChanged"
                        clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑分类对话框 -->
        <el-dialog title="修改分类" :visible.sync="updateCateDialog" width="50%">
            <el-form :model="updateCateForm" :rules="updateCateRules" ref="updateCateRef" label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="updateCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateCateDialog = false">取 消</el-button>
            <el-button type="primary" @click="updateCate">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../api/axios'
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
    components:{ Breadcrumb },
    data(){
        return{
            cateInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            cateList:[],
            total: 0,
            // 为table指定列的定义
            columns: [
                { label: '分类名称', prop: 'cat_name' },
                { label: '是否有效',
                    // 表示，表示将当前列规定为模板列
                    type: 'template',
                    // 当前这一列使用的模板名称
                    template: 'isok'},
                { label: '排序', type: 'template', template: 'order'},
                { label: '操作', type: 'template', template: 'opt'}
            ],

            // 添加对话框的显示和隐藏
            addCateDialog: false,
            // 添加分类的表单数据
            addCateForm: {
                cat_name: '',
                cat_pid: 0,
                cat_level: 0
            },
            // 添加分类表单的验证规则对象
            addCateFormRules: {
                cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
                cat_pid: [{ required: true, message: '请选择父级分类', trigger: 'blur' }]
            },
            // 父级分类的数据列表
            parentCateList:[],
            // 选中的父级分类的id
            selectd_pid:[],
            props:{
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: 'hover',
                checkStrictly: 'true'
            },

            // 编辑对话框的显示和隐藏
            updateCateDialog:false,
            // 编辑的分类id
            updateCateId:"",
            updateCateForm:{},
            updateCateInfo:{
                cat_name:""
            },
            updateCateRules:{
                cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
            }
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        getCateList(){
            request("get","categories",this.cateInfo)
            .then(res =>{
                console.log(res)
                this.cateList=res.data.result
                this.total = res.data.total
            })
        },

        // 分页
        handleSizeChange(val) {
            this.cateInfo.pagesize = val
            this.getCateList();
            // this.handleCurrentChange(1)
        },
        //第几页
        handleCurrentChange(val) {
            this.cateInfo.pagenum = val
            this.getCateList();
        },

        // 点击添加分类对话框
        addCateDialogbtn(){
            this.addCateDialog=true
            request("get","categories",{type:2})    //1.6.1
            .then( res => {
                console.log(res)
                this.parentCateList=res.data
            })
        },
        // 选择父级分类
        parentCateChanged() {
            console.log(this.selectd_pid)
            this.addCateForm.cat_pid=this.selectd_pid[this.selectd_pid.length - 1]
            this.addCateForm.cat_level = this.selectd_pid.length
        },
        addCate(){
            this.$refs.addCateFormRef.validate(async valid => {
                if (!valid) return
                request("post","categories",this.addCateForm)   //1.6.2
                .then(res => {
                    console.log(res)
                    if(res.meta.status==201){
                        this.$message.success('添加分类成功!')
                        this.addCateDialog=false
                        this.getCateList()
                    }else{this.$message.error('添加分类失败!')}
                })
            })
        },
        addCateDialogClosed() {
            this.$refs.addCateFormRef.resetFields()
            this.selectd_pid = []
        },

        // 编辑分类对话框
        updateCateDialogbtn(info){
            this.updateCateDialog=true
            this.updateCateId=info.cat_id
            request("get","categories/"+info.cat_id)    //1.6.3
            .then(res => {
                console.log(res)
                this.updateCateForm=res.data
            })
        },
        updateCate(){
            this.updateCateInfo.cat_name=this.updateCateForm.cat_name
            this.$refs.updateCateRef.validate(async valid => {
                if (!valid) return
                request("put","categories/"+this.updateCateForm.cat_id,this.updateCateInfo)     //1.6.4
                .then(res => {
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message.success('更新分类数据成功!')
                        this.updateCateDialog=false
                        this.getCateList()
                    }else{this.$message.error('更新分类数据失败!')}
                })
            })
        },

        // 删除分类
        deleteCate(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '删除分类', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request("delete","categories/"+id)  //1.6.5
                .then(res => {
                    console.log(res)
                    if(res.meta.status==200){
                        this.$message.success('分类删除成功!')
                        this.getCateList()
                    }else{this.$message.error('分类删除失败!')}
                })
            })
        }
    }
}
</script>

<style scoped>
.addbtn{
    margin-bottom: 20px;
}
</style>